<template>
    <div class='shopping'>
        <router-link tag='div' :to="'/home/shopnav/'+item.id " class="shop-img" v-for='item in shopp' :key='item.id'>
           <img :src='item.img_url' alt="">
           <h4>{{item.title}}</h4>
           <div class="shop-items">
              <p class="shop-p1">
                 <span>{{item.sell_price}}</span>
                 <span class='old'>{{item.market_price}}</span>
              </p>
               <p class="shop-p2"> 
                 <span>热卖中</span>
                 <span>剩余{{item.stock_quantity}}件</span>
              </p>
           </div>
           
       </router-link>
      <mt-button type="danger" size="large" @click='addshop'>更多...</mt-button>
       
    </div>
</template>
<script>
export default {
    data() {
        return {
            index:1,
            shopp:[]
        }
    },
    created() {
        this.getshop()
    },
    methods: {
        getshop(){
            this.$http.get('api/getgoods?pageindex='+this.index).then(shopping=>{
                // console.log(shopping);
                if(shopping.body.status==0){
                this.shopp=this.shopp.concat(shopping.body.message);
                }
                
            })
        },
        addshop(){
            this.index++;
            this.getshop()
        }
    },
}
</script>
<style lang="scss" scoped>
    *{
        padding:0;
        margin:0;
    }
    .shopping{
        padding:5px;
        box-sizing:border-box;
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
    .shop-img{
        margin-top:8px;
        width:49%;
        height:40vh;
        box-shadow:0 0 8px #ccc;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        
        
        
        img{
            width:100%;
            height:48%

        }
        .shop-items{
         height:12vh;
         background:#ccc;
         .old{
             text-decoration: line-through;

         }
         p{
             display:flex;
              justify-content:space-between;
              padding:8px;

              span:nth-child(1){
                 font-size:16px;
                 color:red;
                 
              }
              span:nth-child(2){
                 font-size:12px;
                
              }
         }
        }
    }

    }

</style>